<script setup lang="ts">

import {computed, ref, onMounted, watch} from "vue";
import { ElCarousel, ElCarouselItem, ElTag } from 'element-plus';

const location = ref([
  {
    value: 'shanghai',
    label: '上海',
    children: [
      {
        value: 'shanghai',
        label: '上海',
      },

    ],
  },
  {
    value: '江苏',
    label: '江苏',
    children: [
      {
        value: '南京',
        label: '南京',
      },

    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '深圳',
        label: '深圳',
      },

    ],
  },
]);
import { CloseBold } from '@element-plus/icons-vue'
import {FavorJOBService, getJobDetailsService, GetRecommendedJobListService, PostJOBService, getPersonalMessage} from "@/api/job.js";
import {ElMessage} from "element-plus";
import {useUserInfoStore} from "@/stores/userInfo.js";
import {useRouter} from "vue-router";
import {getUserInfoService} from "@/api/user.js";

const router = useRouter();
const isFavorited = ref(false)
const jobFetched = ref(false);
const userInfoStore = useUserInfoStore();
const userInfo = ref({...userInfoStore.userInfo});
console.log("userInfo:", userInfo.value)
const userId = ref(userInfo.value.id);
const status = ref(0);
const nowJobId = ref(0);
const selectedCity = ref('');
const selectedSalaryRange = ref('');
const companySize = ref('');

//获取用户信息
const userInfo2 = ref({})

async function getUserInfo2(){
  let res = await getUserInfoService()
  userInfo2.value = res.data
}

getUserInfo2();

const RecommendedJobList = ref([
  {
    jobId: 'J001',
    name: '前端开发工程师',
    companyName: '科技先锋有限公司',
    salary: '15k-25k',
    tags: ['Vue.js', 'JavaScript', 'HTML5', 'CSS3'],
    location: '北京市 海淀区',
    hr: '李华',
    description: '我们正在寻找一位热情洋溢的前端开发者，参与到我们的创新项目中，负责前端架构设计与开发工作。',
    degree: '本科及以上',
    experience: '3-5年',
    size: '15-50人',
    salaryYear: '1年',
    workRole: '系统架构师,开发者',
    workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
    workField: '海外信贷业务系统开发',
    workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
    count:0
  },
  {
    jobId: 'J002',
    name: '后端开发工程师',
    companyName: '数字创新科技',
    salary: '20k-30k',
    tags: ['Java', 'Spring Boot', 'MySQL', 'RESTful API'],
    location: '上海市 徐汇区',
    hr: '张明',
    description: '我们需要一名技术精湛的后端开发者，负责服务器端逻辑开发，数据库设计及优化，以及API接口开发与维护。',
    degree: '本科及以上',
    experience: '3-5年',
    size: '50-100人',
    salaryYear: '1-2年',
    workRole: '系统架构师,开发者',
    workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
    workField: '海外信贷业务系统开发',
    workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
    count:0
  },
  {
    jobId: 'J003',
    name: 'UI/UX设计师',
    companyName: '创意设计工作室',
    salary: '12k-20k',
    tags: ['Adobe XD', 'Sketch', '用户体验', '交互设计'],
    location: '广州市 天河区',
    hr: '王丽',
    description: '寻找有创造力的UI/UX设计师，能够设计出用户友好的界面，提升产品体验，参与产品设计的全周期流程。',
    degree: '不限',
    experience: '2-4年',
    size: '15人以下',
    salaryYear: '1年',
    workRole: '系统架构师,开发者',
    workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
    workField: '海外信贷业务系统开发',
    workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
    count:0
  },
  {
    jobId: 'J004',
    name: '产品经理',
    companyName: '智慧生活科技',
    salary: '25k-35k',
    tags: ['市场调研', '产品规划', '需求分析', '项目管理'],
    location: '深圳市 南山区',
    hr: '刘涛',
    description: '我们寻找有远见的产品经理，负责产品的全生命周期管理，从市场分析到产品设计、开发到上市推广，推动产品持续迭代升级。',
    degree: '本科及以上',
    experience: '5年以上',
    size: '200-500人',
    salaryYear: '2-3年',
    workRole: '系统架构师,开发者',
    workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
    workField: '海外信贷业务系统开发',
    workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
    count:0
  },
  {
    jobId: 'J005',
    name: '数据分析专员',
    companyName: '大数据分析中心',
    salary: '10k-18k',
    tags: ['Python', 'SQL', 'Excel', '数据可视化'],
    location: '杭州市 西湖区',
    hr: '赵敏',
    description: '我们需要一位熟练的数据分析师，负责数据收集、清洗、分析和报告制作，帮助公司做出数据驱动的决策。',
    degree: '本科及以上',
    experience: '1-3年',
    size: '50-100人',
    salaryYear: '1年',
    workRole: '系统架构师,开发者',
    workRequirements: 'Java,Spring,MySQL,分布式中间件(如Dubbo,Sharding,JDBC)',
    workField: '海外信贷业务系统开发',
    workExperience: '5年以上Java开发经验，熟悉微服务架构和性能调优',
    count:0
  },

])

const jobDetails = ref({
  jobId:'',
  location:'',
  hr:'',
  tags:'',
  name:'',
  salary:'',
  companyName:'',
  description:'',
  size:'',
})
const companyDetails = ref({
  name:'',
  companyId:'',
  phone:'',
  introduction:'',
  status:'',
  size:'',
  address:'',
  companyType:''
})

// 定义一个ref来保存原始的职位列表数据
const originalJobsList = ref([]);
async function GetRecommendedJobList() {
  let res = await GetRecommendedJobListService();
  RecommendedJobList.value = res.data.job;
  for (let i = 0; i < RecommendedJobList.value.length; i++) {
    const size = res.data.company[i]?.size || '未知大小';
    RecommendedJobList.value[i].size = size;
  }
  for (let i = 0; i < RecommendedJobList.value.length; i++) {
    const count = res.data.jobRecommend[i];
    RecommendedJobList.value[i].count = count;
  }
  console.log("RecommendedJobList:",RecommendedJobList.value)


  originalJobsList.value = res.data.job; // 保存原始数据
  for (let i = 0; i < originalJobsList.value.length; i++) {
    const size = res.data.company[i]?.size || '未知大小';
    originalJobsList.value[i].size = size;
  }
  for (let i = 0; i < RecommendedJobList.value.length; i++) {
    const count = res.data.jobRecommend[i];
    RecommendedJobList.value[i].count = count;
  }
  applyFilters();
}

GetRecommendedJobList();

const onSelectChange = async (selectedValues: string[]) => {
  if (selectedValues.length >= 2) {
    const secondLevelValue = selectedValues[1];
    const findSecondLevelLabel = (options: any[]) => {
      for (const option of options) {
        if (option.children) {
          for (const child of option.children) {
            if (child.value === secondLevelValue) {
              return child.label;
            }
          }
        }
      }
      return null;
    };
    selectedCity.value = findSecondLevelLabel(location.value);

  }
};

const applyFilters = () => {

  // 计算薪资范围的最小值和最大值
  let minSalary = 0;
  let maxSalary = Number.POSITIVE_INFINITY; // 初始化为正无穷大，表示没有上限

  switch (selectedSalaryRange.value) {
    case '1': // 3k以下
      minSalary = 3 * 12;
      maxSalary = 5 * 12;
      break;
    case '2': // 3-5k
      minSalary = 3 * 12;
      maxSalary = 5 * 12;
      break;
    case '3': // 5-10k
      minSalary = 5 * 12;
      maxSalary = 10 * 12;
      break;
    case '4': // 10-20k
      minSalary = 10 * 12;
      maxSalary = 20 * 12;
      break;
    case '5': // 20-50k
      minSalary = 20 * 12;
      maxSalary = 50 * 12;
      break;
    case '6': // 50k以上
      minSalary = 50 * 12;
      break;
    default:
      // 对于"不限"或其他未预料到的值，不应用特定的薪资筛选
      break;
  }
  // 应用过滤条件
    const filteredData = originalJobsList.value.filter(job => {

      const cityMatches = selectedCity.value === '' || job.location.includes(selectedCity.value);
      const sizeMatches = companySize.value === '' || job.size.includes(companySize.value);
      const salaryMatches = job.salaryYear <= maxSalary && job.salaryYear >= minSalary;

      if(selectedSalaryRange.value === '不限' && companySize.value === '不限')
        return cityMatches;
      else if(selectedSalaryRange.value === '不限')
        return cityMatches && sizeMatches;
      else
        return cityMatches && salaryMatches && sizeMatches;

  });
  // 将过滤后的数据写回至RecommendedJobList
  if(filteredData.length !== 0){
    RecommendedJobList.value = filteredData;
  }
  else
    ElMessage.error("没有符合条件的职位");
};

// 监听筛选条件变化
watch([selectedCity, selectedSalaryRange, companySize], () => {
  applyFilters();
}, { deep: true });


const selectedJobIndex = ref(-1); // 新增一个状态来跟踪被选中的项目索引
const selectedJob = ref(null)
const hoverIn = (index) => {
  // 如果需要，可以根据索引做些什么，比如高亮对应项
};

const hoverOut = () => {
  // 鼠标移出时的处理，如果有必要的话
};

const MYstatus = ref(0);
const favor = ref(0)
const showJobDetail = async (job, index) => {
  MYstatus.value = 0;
  favor.value = 0;
  let res = await getPersonalMessage(userId.value, job.jobId, job.companyId)
  if(res.data != null){
    MYstatus.value = res.data.status;
    if(res.data.myFavorId!= null)
      favor.value = 1;
  }

  if (selectedJobIndex.value === index) {
    selectedJobIndex.value = -1; // 如果再次点击相同的项，则取消选中
  } else {
    selectedJobIndex.value = index;
  }
  selectedJob.value = job;
  nowJobId.value = job.jobId
};

//用户收藏职位功能
async function onFavorite(jobId) {
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  jobFetched.value = true;
  console.log("fabor:", favor.value)
  if (favor.value === 0) {
    // 调用收藏的逻辑
    FavorJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId, 1);
  } else {
    // 调用取消收藏的逻辑
    FavorJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId, 0);
  }
}

//收藏职位
async function FavorJOB(userId, jodId, companyId, sss){
  await FavorJOBService(userId, jodId, companyId, sss);
  if(sss === 1)
    ElMessage.success("收藏成功");
  if(sss === 0)
    ElMessage.success("取消收藏");
}

//投递简历功能
async function handleClick(jobId) {
  let result = await getJobDetailsService(jobId);
  jobDetails.value = result.data.job;
  companyDetails.value = result.data.company;
  jobFetched.value = true;

  PostJOB(userId.value, jobDetails.value.jobId, companyDetails.value.companyId);
}

async function PostJOB(userId, jodId, companyId){
  console.log("userId:",userId, "jodId:", jodId, "companyId:", companyId);
  await PostJOBService(userId, jodId, companyId);
  status.value = 1;
  ElMessage.success("投递简历成功");
}

const viewDetails = (jobId)=>{
  router.push(`/JobDetails/${jobId}`)
}


const isExpectationModalVisible = ref(false);
const jobExpectation = ref({
  position: '',
});


const expectations = ref([]);
const newExpectation = ref('');


// 显示添加求职期望的模态框
const showExpectationModal = () => {
  isExpectationModalVisible.value = true;
};

// 保存求职期望
const saveExpectation = () => {
  // 确保jobExpectation的属性有值，这里简化处理，仅检查position字段
  if (jobExpectation.value.position.trim()) {
    // 将jobExpectation的当前状态推入到expectations数组中
    expectations.value.push({
      position: jobExpectation.value.position,
    });
    // 清空表单数据（可选，取决于您的业务需求）
    jobExpectation.value = { position: ''};
    isExpectationModalVisible.value = false;
    // 可能还需要其他处理逻辑
  }
};

// 计算属性，用于显示的求职期望列表
const displayedExpectations = computed(() => expectations.value);

const clearPosition = (index) => {
  displayedExpectations.value[index].position = ''; // 清空position属性
};


</script>

<template>
  <!-- Start Preloader Area -->
  <div class="preloader">
    <div class="lds-ripple">
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- End Preloader Area -->

  <!-- Start Header Area -->
  <header class="header-area">
    <!-- Start Top Header -->
    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-6">
            <ul class="header-left-content">
              <li>
                <span>铸职</span>
                <a href="tel:+1-(514)-312-5678">智能求职平台</a>
              </li>
            </ul>
          </div>

          <div class="col-lg-6 col-md-6">
            <div class="header-right-content">
              <ul class="log-in" v-if="userInfo2.value === ''">
                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-lock"></i>
                    登录
                  </a>
                </li>

                <li>
                  <a href="log-in-register.html">
                    <i class="bx bxs-user"></i>
                    注册
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Top Header -->

    <!-- Start Navbar Area -->
    <div class="navbar-area">
      <div class="mobile-nav">
        <div class="container">
          <div class="mobile-menu">
            <div class="logo">
              <a href="index.html">
                <img src="@/assets/images/logo.png" alt="logo">
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="desktop-nav">
        <div class="container">
          <nav class="navbar navbar-expand-md navbar-light">
            <a class="navbar-brand" href="index.html">
              <img src="@/assets/images/logo.png" alt="logo">
            </a>

            <div class="collapse navbar-collapse mean-menu">
              <ul class="navbar-nav m-auto">
                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/HomePage')">
                    首页
                  </a>

                </li>

                <li class="nav-item">
                  <a href="" class="nav-link active" v-if="userInfo2.status === 0" @click="router.push('/RecommendJobPage')">
                    工作推荐
                  </a>
                  <a href="" class="nav-link active" v-if="userInfo2.status === 1" @click="router.push('/RecommendResumePage')">
                    简历推荐
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" @click="router.push('/JobList')">
                    搜索
                  </a>
                </li>

                <li class="nav-item">
                  <a href="" class="nav-link" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    个人页面
                  </a>
                  <a href="" class="nav-link" v-if="userInfo2.status === 1" @click="router.push('/CompanyPersonalPage')">
                    个人页面
                  </a>
                </li>

                <li class="nav-item">
                  <a href="#" class="nav-link" @click="router.push('/test')">
                    分析
                  </a>
                </li>

              </ul>

              <div class="others-option">
                <div class="get-quote">
                  <a href="" class="default-btn" v-if="userInfo2.status === 0" @click="router.push('/UserPersonalPage')">
                    写简历
                  </a>
                  <a href="#" class="default-btn" v-if="userInfo2.status === 1" @click="router.push('/recruitTest')">
                    发布职位
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>

      <div class="others-option-for-responsive">
        <div class="container">
          <div class="dot-menu">
            <div class="inner">
              <div class="circle circle-one"></div>
              <div class="circle circle-two"></div>
              <div class="circle circle-three"></div>
            </div>
          </div>

          <div class="container">
            <div class="option-inner">
              <div class="others-option justify-content-center d-flex align-items-center">
                <div class="get-quote">
                  <a href="post-job.html" class="default-btn">
                    写简历
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Navbar Area -->
  </header>
  <!-- End Header Area -->

  <!-- Start Page Title Area -->
  <div class="page-title-area">
    <div class="container">
      <div class="page-title-content">
        <h2>职位推荐</h2>
        <ul>
          <li>
            <a href="index.html">
              首页
            </a>
          </li>

          <li class="active">推荐</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Page Title Area -->

  <!-- Start Candidates Dashboard Area -->
  <section class="candidates-dashboard-area ptb-100">
    <div class="container">
      <div class="job_container">

        <!-- 顶部长条形矩形框 -->
        <div class="job_top-bar">
          <div class="job_top-bar-content">
            <div class="job_top-bar-first-line">

              <hr class="job_top-bar-divider" />
<!--              <label for="intention" class="filter-label">求职期望：</label>-->
<!--              <el-button type="primary" @click="showExpectationModal" class="job_top-bar-intention">添加求职期望</el-button>-->

              <!-- 修改后的显示添加的求职期望区域 -->
              <div class="job_expectations">
                <div
                    v-for="(expectation, index) in displayedExpectations"
                    :key="index"
                    class="job_expectation_item"
                >
                  <div v-if="expectation.position" class="expectation_value position">
                    {{ expectation.position }}<el-icon @click="clearPosition(index)"><CloseBold /></el-icon>
                  </div>
                </div>
                <!-- 使用伪元素添加末尾逗号 -->
<!--                <div v-if="displayedExpectations.length" class="comma"></div>-->
              </div>
            </div>
            <!-- 弹窗内容定义在下方... -->

            <!-- 第二行：筛选条件 -->
            <div class="job_top-bar-second-line">
<!--              <div class="filter-group">-->
<!--                <label for="city" class="filter-label">城市：</label>-->

<!--                <el-cascader :options="location" v-model="selectedCity" @change="onSelectChange" popper-class="custom-cascader-menu">-->
<!--                  <template #default="{ node, data }">-->
<!--                    <span>{{ data.label }}</span>-->
<!--                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>-->
<!--                  </template>-->
<!--                </el-cascader>-->

<!--              </div>-->
              <div class="filter-group">

                <label for="salaryRange" class="filter-label">薪资范围：</label>
                <el-select id="salaryRange" v-model="selectedSalaryRange" placeholder="请选择" class="el-select-custom-width">
                  <el-option label="不限" value="不限"></el-option>
                  <el-option label="3k以下" value="1"></el-option>
                  <el-option label="3-5k" value="2"></el-option>
                  <el-option label="5-10k" value="3"></el-option>
                  <el-option label="10-20k" value="4"></el-option>
                  <el-option label="20-50k" value="5"></el-option>
                  <el-option label="50k以上" value="6"></el-option>
                </el-select>

                <label for="size" class="filter-label">公司规模：</label>
                <el-select id="size" v-model="companySize" placeholder="请选择" class="el-select-custom-width">
                  <el-option label="不限" value="不限"></el-option>
                  <el-option label="0-20人" value="0-20人"></el-option>
                  <el-option label="20-99人" value="20-99人"></el-option>
                  <el-option label="100-499人" value="100-499人"></el-option>
                  <el-option label="500-999人" value="500-999人"></el-option>
                  <el-option label="1000-9999人" value="1000-9999人"></el-option>
                  <el-option label="10000人以上" value="10000人以上"></el-option>
                </el-select>
              </div>
              <!-- 其他筛选条件同理添加... -->
            </div>
          </div>

          <el-dialog
              v-model="isExpectationModalVisible"
              title="添加求职期望"
              @close="isExpectationModalVisible = false"
          >
            <!-- 表单元素，例如输入框等 -->
            <el-form>
              <el-form-item label="期望职位">
                <el-input v-model="jobExpectation.position" placeholder="请输入期望职位"></el-input>
              </el-form-item>
            </el-form>

            <!-- 保存按钮，绑定到saveExpectation方法 -->
            <template #footer>
    <span slot="footer">
      <el-button @click="isExpectationModalVisible = false">取消</el-button>
      <el-button type="primary" @click="saveExpectation">保存</el-button>
    </span>
            </template>
          </el-dialog>
        </div>

        <!-- 下部左右布局 -->
        <div class="job_main-content">
          <!-- 左半部分：若干个圆角矩形框 -->
          <div class="job_left-section">
            <div
                v-for="(job, index) in RecommendedJobList"
                :key="index"
                class="job_rounded-box"
                :class="{ active: selectedJobIndex === index }"
                @mouseover="hoverIn(index)"
                @mouseout="hoverOut"
                @click="showJobDetail(job, index)"
            >
              <div class="job_details">
                <div class="job_name">{{ job.name }}</div>
                <div class="job_salary" style="text-align: right;">{{ job.salary }}</div>
              </div>

              <div class="job_other-info">

                <el-tag
                    effect="dark"
                    class="el-tag-item"
                    size="small"
                >
                  {{ job.experience }}
                </el-tag>
                <el-tag
                    effect="dark"
                    class="el-tag-item"
                    size="small"
                >
                  {{job.degree }}
                </el-tag>

                <el-tag
                    :type="primary"
                    effect="dark"
                    class="el-tag-item"
                    size="small"
                >
                  {{ job.tags }}
                </el-tag>


              </div>

              <hr class="job_separator"/>

              <div class="job_location-company">
                <span class="job_location">{{ job.location }}</span>
                <span class="job_companyName" style="text-align: right;">{{ job.companyName }}</span>
              </div>


            </div>
          </div>

          <!-- 右半部分：一个大的圆角矩形框 -->
          <div class="job_right-section job_large-rounded-box">
            <div v-if="selectedJob" class="job_detail-view">
              <!-- 第一行：名称与薪资 -->
              <div class="job_details_row">
                <div class="job_details_name">{{ selectedJob.name }}</div>
                <div>匹配技能数：{{ selectedJob.count }}</div>
                <div class="job_details_salary" style="text-align: right;">{{ selectedJob.salary }}</div>

              </div>

              <!-- 第二行：地点、学历、经验 -->
              <div class="job_details_row">
                <div class="job_details_info_item">
                  <img src="@/assets/images/oneself-image/地点.png" alt="Location Icon" class="job_details_image"/>
                  {{ selectedJob.location }}
                </div>
                <div class="job_details_info_item">
                  <img src="@/assets/images/oneself-image/学历.png" alt="Location Icon" class="job_details_image"/>
                  {{ selectedJob.degree }}
                </div>
                <div class="job_details_info_item">
                  <img src="@/assets/images/oneself-image/资历.png" alt="Location Icon" class="job_details_image"/>
                  {{ selectedJob.experience }}
                </div>

              </div>
              <hr class="job_separator"/>

              <!-- 第三行：标签 -->
              <div class="job_details_tags">

                <el-tag
                    :type="primary"
                    class="el-tag-item"
                    effect="dark"
                >
                  {{ selectedJob.tags }}
                </el-tag>

              </div>

              <div class="job_actions" >
                <button class="job_action_button job_action_button_favorite" :class="{ 'default-btn': true, 'active': favor}"
                        @click="onFavorite(nowJobId)">
                  {{ favor===1 ? '已收藏' : '去收藏' }}</button>
                <button class="job_action_button job_action_button_resume" :class="{ 'default-btn': true, 'disabled-btn': MYstatus === 1 }"
                        @click="handleClick(nowJobId)">{{ MYstatus === 0 || MYstatus === null ? '投简历' : '已投递' }}</button>
              </div>


              <div class="job-details-analyze">
                <h3>关键信息提取分析</h3>

                <div class="work-role">
                  <strong>岗位角色:</strong> {{ selectedJob.workRole.split(',').join(' / ') }}
                </div>

                <div class="work-requirements">
                  <strong>技能要求:</strong> {{ selectedJob.workRequirements.split(',').join(' / ') }}
                </div>

                <div class="work-field">
                  <strong>工作领域:</strong> {{ selectedJob.workField }}
                </div>

                <div class="work-experience">
                  <strong>工作经验:</strong> {{ selectedJob.workExperience }}
                </div>
              </div>

              <!-- 第四行：职位描述 -->
              <div class="preserve-newlines">{{ selectedJob.description }}</div>

              <hr class="job_separator"/>

              <!-- 第五行：HR信息 -->
              <div class="job_details_row job_details_hr_company">
                <div class="job_avatar">
                  <img src="@/assets/images/oneself-image/人.png" alt="Avatar" class="job_avatar_img"/>
                </div>
                <div class="job_details_hr_company_info">
                  <div class="job_details_hr">HR: {{ selectedJob.hr }}</div>
                  <div class="job_details_company">{{ selectedJob.companyName + '    ' }}{{ selectedJob.size }}</div>
                </div>
              </div>

              <div class="job_actions">
                <button class="job_action_button job_action_button_details" @click="viewDetails(nowJobId)">查看详情</button>
              </div>

            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Candidates Dashboard Area -->

  <!-- Start Subscribe Area -->
  <section class="subscribe-area">
    <div class="container">
      <div class="subscribe-bg">
        <div class="row align-items-center">
          <div class="col-lg-6">
            <div class="subscribe-content">
              <h2>找事儿，一期搞定</h2>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!-- End Subscribe Area -->

  <!-- Start Footer Area -->
  <footer class="footer-area pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget single-bg">
            <a href="index.html" class="logo">
              <img src="@/assets/images/logo.png" alt="Image">
            </a>

            <p>铸职智能求职系统，是一个创新的在线招聘平台，旨在重塑求职者的探索旅程与企业的招聘体验。我们融合了先进的数据分析技术、人工智能算法与用户至上的设计理念，为求职者打造个性化、高效的职业匹配通道，同时为企业提供精准的人才筛选与招聘解决方案。</p>

          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>联系方式</h3>

            <ul class="address">
              <li>
                <i class="bx bx-phone-call"></i>
                <span>联系电话:</span>
                <a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
              </li>
              <li>
                <i class="bx bx-envelope"></i>
                <span>邮箱:</span>
                <a href="mailto:hello@jubi.com">hello@jubi.com</a>
              </li>
              <li class="location">
                <i class="bx bx-location-plus"></i>
                <span>地址:</span>
                江西省南昌市南昌航空大学
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>帮助</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Contact Us</a>
              </li>
              <li>
                <a href="#">Site Map</a>
              </li>
              <li>
                <a href="#">Terms of Use</a>
              </li>
              <li>
                <a href="#">Privacy Centre</a>
              </li>
              <li>
                <a href="#">Blog</a>
              </li>
            </ul>
          </div>
        </div>

        <div class="col-lg-3 col-md-6">
          <div class="single-footer-widget">
            <h3>猎头</h3>

            <ul class="import-link">
              <li>
                <a href="#">Create Account</a>
              </li>
              <li>
                <a href="#">Browse Jobs</a>
              </li>
              <li>
                <a href="#">Upload CV</a>
              </li>
              <li>
                <a href="#">Company Profile</a>
              </li>
              <li>
                <a href="#">International Jobs</a>
              </li>
              <li>
                <a href="#">FAQ</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Footer Area -->

  <!-- Start Copy Right Area -->
  <div class="copy-right-area">
    <div class="container">
      <p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
      </p>
    </div>
  </div>
  <!-- End Copy Right Area -->

  <!-- Start Go Top Area -->
  <div class="go-top">
    <i class="bx bx-chevrons-up"></i>
    <i class="bx bx-chevrons-up"></i>
  </div>
  <!-- End Go Top Area -->
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";
@import "@/assets/css/guidepage.css";

.preserve-newlines {
  white-space: pre-wrap;
}

.disabled-btn {
  pointer-events: none; /* 阻止鼠标事件 */
  opacity: 0.6; /* 可选：降低透明度以指示按钮被禁用 */
  cursor: not-allowed; /* 更改光标形状，提示用户按钮不可点击 */
}

.job_container {
  width: 100%;
  height: 100vh; /* 仅作为示例，根据需要调整 */
  display: flex;
  flex-direction: column;
}

.job_top-bar {
  width: 100%;
  height: 100px; /* 自定义高度 */
  background-color: #2041e1; /* Element Plus的主题色，可自定义 */
}

.job_main-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.job_left-section {
  /* 左边占30% */
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 圆角矩形之间的间距 */
  font-size: large;
  max-height: 750px;
  overflow-y: auto;
}

.job_rounded-box {
  height: 175px; /* 自定义高度 */
  width: 100%; /* 或根据需要调整 */
  background-color: rgba(246, 247, 248, 0.75);
  border-radius: 8px;
  padding: 15px; /* 添加内边距，可以根据需要调整具体的数值 */
  box-sizing: border-box; /* 确保内边距被包含在总宽度和高度内 */
}


.job_right-section {
  /* 如果之前有设置固定高度，移除之，如 height: 100%; */
  flex: 1; /* 如果使用Flex布局，确保它可以撑开容器 */
  min-height: 100%; /* 可选，设置最小高度以保持一定的视觉效果，根据需要调整 */
  overflow-y: auto; /* 如果内容超出容器，可以添加滚动条，避免遮挡下方内容 */
}

.job_large-rounded-box {
  /* 右边占70% */
  flex: 0 0 65%;
  max-height: 750px;
  width: 100px; /* 或根据需要调整 */
  background-color: rgba(246, 247, 248, 0.75);
  border-radius: 8px;
  padding: 20px; /* 内边距，让内容看起来更舒适 */
}

.job_details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.job_name {
  flex: 1;
}

.job_other-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
}

.job_location-company {
  display: flex;
  justify-content: space-between;
}

.job_separator {
  border: none; /* 清除默认边框样式 */
  border-bottom: 1px dashed #ccc; /* 添加虚线底部边框 */
  margin: 5px 0; /* 上下外边距，可根据需要调整 */
  width: 100%; /* 确保分隔线横跨整个圆角矩形框 */
}

.job_details,
.job_other-info,
.job_location-company {
  padding: 5px 0; /* 上下内边距，水平内边距保持默认 */
}

.job_rounded-box {
  /* 基础样式 */
  cursor: pointer;
  transition: box-shadow 0.3s, border-color 0.3s;
  border-radius: 8px;
  border: 1px solid transparent;
  border-width: medium;

}

.job_rounded-box:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.job_rounded-box.active {
  border-color: #2041e1;
  border-width: medium;
}

.job_name {
  color: #2041e1; /* 职位名称改为蓝色 */
}

.job_salary {
  color: red; /* 工资颜色改为红色 */
}

.job_other-info .info-item {
  display: inline-block;
  background-color: #c0c0c0; /* 灰色背景 */
  border-radius: 8px; /* 圆角 */
  padding: 2px 5px; /* 内边距，根据需要调整 */
  color: #ffffff; /* 文字颜色改为白色 */
  margin-right: 5px; /* 可选项，控制间距 */
  margin-top: 2px;
  font-size: medium;
}


.job_details_row {
  display: flex;
  /* 移除默认的justify-content值，让子元素按照源顺序排列 */
  justify-content: flex-start;
  flex-wrap: nowrap; /* 防止换行 */
  margin-bottom: 10px;
}

.job_details_name,
.job_details_salary {
  flex: 1;
}

.job_details_tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.job_details_tag {
  display: inline-block; /* 使每个标签可以单独设置样式 */
  background-color: #ccc; /* 灰色背景 */
  border-radius: 4px; /* 圆角 */
  padding: 2px 8px; /* 内边距 */
  color: white; /* 字体颜色变为白色 */
  margin-right: 5px; /* 可选，控制标签间的间距 */
  margin-bottom: 5px; /* 控制垂直间距，如果需要的话 */
}

.job_details_description,
.job_details_hr {
  margin-bottom: 10px;
}

.job_details_description {
  margin-bottom: 20%;
}

.job_details_name {
  font-size: 36px; /* 或根据需求调整大小 */
  font-weight: bold;
  color: #2196F3;
}

.job_details_salary {
  font-size: 21px; /* 较name稍小，但仍然增大变粗 */
  font-weight: bold;
  color: red;
}

.job_details_info_item {
  padding: 0; /* 或者设置适当的padding值，如2px */
  margin-right: 5px; /* 控制元素间的水平间距 */
  flex-shrink: 0; /* 防止元素因空间不足而缩小 */
  border: 1px solid #f6f7f8; /* 保持原有边框设定 */
  border-radius: 4px;
  padding: 5px;
}

.job_details_hr {
  font-size: 18px; /* 或根据需要调整 */
}

.job_details_image {
  width: 16px; /* 调整图片宽度 */
  height: auto; /* 保持图片宽高比 */
  margin-right: 5px; /* 图片与文字之间的间隔 */
  vertical-align: middle; /* 保证图片与文字垂直居中对齐 */
}

.job_details_row.job_details_hr_company {
  display: flex;
  align-items: center; /* 使内容垂直居中对齐 */
}

.job_avatar {
  margin-right: 10px; /* 根据需要调整与文本的间距 */
}

.job_avatar_img {
  margin-left: 25px;
  margin-right: 25px;
  width: 40px; /* 设置头像的宽度，根据实际需求调整 */
  height: 40px;
  border-radius: 50%; /* 使头像是圆形的 */
  object-fit: cover; /* 保证图片填充头像框而不变形 */
}

.job_details_hr_company_info {
  margin-top: 20px;
}


.job_actions {
  display: flex;
  justify-content: flex-end; /* 收藏和投简历靠右对齐 */
  margin-top: 10px; /* 与上一元素的间距 */
  margin-bottom: 20px;
  position: relative; /* 用于绝对定位中间的按钮 */
}

.job_action_button {
  background-color: #4CAF50; /* 默认按钮背景色 */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s;
}

.job_action_button:hover {

}

.job_action_button_favorite {
  background-color: #FF9800; /* 收藏按钮颜色 */
  margin-right: 10px;
}

.job_action_button_favorite:hover {
  background-color: #FFA726; /* 收藏按钮悬停颜色 */
}

.job_action_button_favorite:active {
  background-color: #FFB74D; /* 收藏按钮点击颜色 */
}

.job_action_button_resume {
  background-color: #2196F3; /* 投简历按钮颜色 */
}

.job_action_button_resume:hover {
  background-color: #42A5F5; /* 投简历按钮悬停颜色 */
}

.job_action_button_resume:active {
  background-color: #62B1FF; /* 投简历按钮点击颜色 */
}

/* 居中对齐的查看详情按钮 */
.job_action_button_details {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #9C27B0; /* 查看详情按钮颜色 */
  margin-top: 10px; /* 调整与上方元素的间距 */
}

.job_action_button_details:hover {
  background-color: #BA68C8; /* 查看详情按钮悬停颜色 */
}

.job_action_button_details:active {
  background-color: #E1BEE7; /* 查看详情按钮点击颜色 */
}



/* 顶部长条形矩形框的整体样式 */
.job_top-bar {
  display: flex;
  flex-direction: column; /* 修改为列布局，以先垂直排列内容 */
  justify-content: flex-start; /* 内容从顶部开始排列 */
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

/* 第一行内容样式 */
.job_top-bar-first-line {

  display: flex;
  justify-content: flex-start; /* 更新为靠左对齐 */
  width: 100%;
}

/* 第二行筛选条件样式 */
.job_top-bar-second-line {
  display: flex;
  justify-content: flex-start; /* 更新为靠左对齐 */
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* 示例样式，根据需要调整 */
.job_top-bar h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.job_top-bar .filter-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.job_top-bar label {
  font-weight: bold;
  margin-right: 5px;
}

input[type="text"],
select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.filter-group label,
.filter-group .filter-label {
  width: 100px;
}

.filter-label {
  min-width: 80px; /* 或者使用固定宽度，如 width: 80px; 根据实际情况调整 */
  text-align: right; /* 如果希望标签文本右对齐，可以加上这一行 */
}

.el-select-custom-width {
  width: 200px; /* 您可以根据需要调整这个值 */
}

/* 为按钮添加圆角和美化 */
.job_top-bar-intention {
  border-radius: 10px; /* 调整圆角大小以达到期望的圆润度 */
  padding: 6px 12px; /* 可根据需要调整按钮的内边距 */
  background-color: #409eff; /* Element Plus的默认主色，可根据设计调整 */
  color: #fff;
  border: none; /* 移除默认边框 */
  outline: none; /* 移除焦点时的轮廓 */
  cursor: pointer;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.job_top-bar-intention:hover {
  background-color: #28a745; /* 鼠标悬停时的颜色变化 */
}

/* 分割线样式 */
.job_top-bar-divider {
  height: 1px;
  background-color: #ccc;
  margin: 10px 0; /* 上下外边距，用于与其他元素分隔 */
}


/* 为期望项添加样式，并确保内容在同一行显示 */
.job_expectation_item {
  /* 弹性伸缩，确保所有项等宽 */
  flex: 1;
}

/* 保持之前的样式定义 */
.expectation_value {
  border-radius: 8px;
  border: 1px solid #007bff;
  background-color: #ffffff;
  margin-left: 5px;
  width: auto;
  padding: 2px 8px;
  font-size: 0.9em;
  text-overflow: ellipsis; /* 当内容被截断时显示省略号 */
}

.job_expectations {
  display: flex;
  flex-wrap: nowrap; /* 确保所有期望值都在一行 */
  overflow-x: auto; /* 如果内容超出，允许水平滚动 */
  max-width: 100%; /* 或者一个具体的宽度，根据容器调整 */
}

/* 为 el-tag 添加一个类名以便更精确地控制样式 */
.el-tag-item {
  margin-right: 5px; /* 按需调整空隙大小 */
  margin-bottom: 5px; /* 如果需要垂直方向上的空隙 */
}



.job-details-analyze {
  /* 添加蓝色边框 */
  border: 1px solid #42A5F5; /* 蓝色边框 */
  /* 添加边缘阴影 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要调整阴影的大小和颜色 */
  /* 内边距，让内容和边框之间有一定的空间 */
  padding: 20px;
  /* 圆角，增加视觉友好度 */
  border-radius: 8px;
  /* 为确保内容不会紧贴边框，可添加一些外边距 */
  margin-bottom: 20px;
}

.job-details-analyze h3 {
  /* 标题样式调整 */
  color: #42A5F5; /* 蓝色标题，与边框颜色呼应 */
  font-size: 24px;
  margin-bottom: 16px; /* 与后续内容的间距 */
}

.job-details-analyze strong {
  /* 加粗标签的样式调整 */
  color: #333; /* 深色文字，增强对比度 */
  font-weight: bold;
  margin-right: 5px; /* 与后面内容的小间距 */
}

.job-details-analyze div {
  /* 每个信息块的样式 */
  margin-bottom: 10px; /* 每个块之间的间距 */
}

/* 如果需要调整段落文本的样式 */
.job-details-analyze p {
  color: #666; /* 轻微淡化正文颜色 */
  line-height: 1.5; /* 舒适的行高 */
}
</style>

